<template>
  <div class="app-container calendar-list-container">

    <div class="filter-container" style="padding-bottom: 10px;"><!-- 上边的搜索条件 -->
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="供应商名称" v-model="listQuery.title">
      </el-input>

      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
      <!--<el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>-->
    </div>

    <!-- 展示数据的table -->
    <el-table
      :data="list"
      v-loading.body="listLoading"
      element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="序号" max-width="250px">
        <template scope="scope">
          <span>{{scope.row.sup_company_id}}</span>
        </template>
      </el-table-column>

      <el-table-column max-width="250px" align="center" label="供应商名称">
        <template scope="scope">
          <span>{{scope.row.sup_company_name}}</span>
        </template>
      </el-table-column>

      <el-table-column max-width="250px" label="质量等级">
        <template scope="scope">
          <!--<icon-svg v-for="n in +scope.row.quality_level" icon-class="star" class="meta-item__icon" :key="n"></icon-svg>-->
          <i v-for="n in +scope.row.quality_level" class="el-icon-star-on" :key="n"></i>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" max-width="250px">
        <template scope="scope">
          <el-button type="primary"
                     @click='showEdit(scope)'
                     size="small" icon="edit">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="delRow(scope.row.sup_company_id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container" style="margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.curr_page"
                     :page-sizes="[1, 2, 3, 5]" :page-size="listQuery.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_count">
      </el-pagination>
    </div>

    <el-dialog title="新增供应商" :visible.sync="isShowCreate" size="small">
      <el-form class="small-space" :model="createTemp" label-position="right" label-width="90px">

        <el-form-item label="供应商名称">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="createTemp.companyName"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入关键字搜索"
            custom-item="my-item-zh"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>


        <el-form-item label="质量等级">
          <el-rate style="margin-top:8px;" v-model="createTemp.quality_level" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowCreate = false">取 消</el-button>
        <el-button type="primary" @click="createSupply">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改供应商信息" :visible.sync="isShowEdit" size="large" top="5%">
      <el-form class="small-space" :model="updateTemp" label-position="right" label-width="90px" :inline="true">

        <!--<el-form-item label="供应商名称" label-width="100px">
          <el-input v-model="updateTemp.sup_company_name"></el-input>
        </el-form-item>-->

        <el-form-item label="供应商联系人" label-width="100px">
          <el-input v-model="updateTemp.contact_man"></el-input>
        </el-form-item>

        <el-form-item label="供应商信誉度" label-width="100px">
          <el-input v-model="updateTemp.credit_class"></el-input>
        </el-form-item>

        <el-form-item label="email" label-width="100px">
          <el-input v-model="updateTemp.email"></el-input>
        </el-form-item>

        <el-form-item label="是否含增值税" label-width="100px">
          <el-input v-model="updateTemp.is_tax"></el-input>
        </el-form-item>

        <el-form-item label="联系人电话" label-width="100px">
          <el-input v-model="updateTemp.phone"></el-input>
        </el-form-item>

        <el-form-item label="质量等级编号" label-width="100px">
          <el-input v-model="updateTemp.quality_level_code"></el-input>
        </el-form-item>

        <el-form-item label="企业地址" label-width="100px">
          <el-input v-model="updateTemp.sup_company_address"></el-input>
        </el-form-item>

        <el-form-item label="供货类型" label-width="100px">
          <el-input v-model="updateTemp.supply_type"></el-input>
        </el-form-item>

        <el-form-item label="供货类型编号" label-width="100px">
          <el-input v-model="updateTemp.supply_type_code"></el-input>
        </el-form-item>

        <el-form-item label="税率" label-width="100px">
          <el-input v-model="updateTemp.tax_ratio"></el-input>
        </el-form-item>

        <el-form-item label="发票种类" label-width="100px">
          <el-input v-model="updateTemp.tax_type"></el-input>
        </el-form-item>

        <el-form-item label="发票种类编号" label-width="100px">
          <el-input v-model="updateTemp.tax_type_code"></el-input>
        </el-form-item>

        <el-form-item label="质量等级" label-width="100px">
          <el-rate style="margin-top:8px;" v-model="updateTemp.quality_level" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateSupply">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { cstOrSupList, supInfoUpdate, cstSupSearch, supInfoView, cstSupDelete } from '@/api/enterprise/supply'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'

  Vue.component('my-item-zh', {
    name:'test',
    functional: true,
    render: function (h, ctx) {
      var item = ctx.props.item;
      return h('li', ctx.data, [
        h('div', { attrs: { class: 'name' } }, [item.cst_company_name])
      ]);
    },
    props: {
      item: { type: Object, required: true }
    }
  });

  export default {
    name: 'supplyList',
    data() {
      return {
        list: null,
        listLoading: true,
        total_count:null,//数据总条数
        total_page:null,//总页数
        listQuery: {
          curr_page: 1,
          page_size: 2,
          cst_sup_type:2,//1：是获取客户，2：获取供应商
          client_type:1
        },
        isShowCreate:false,//是否显示增加供应商弹出框
        isShowEdit:false,//是否显示编辑信息弹出框
        createTemp:{
          companyName:'',
          quality_level:0
        },
        updateTemp:{},
        searchReqData:{
          client_type:1,
          cst_sup_type:1,//1:company 2:user
          curr_page:1,
          page_size:10
        },
        timeout:null,
        delData:{
          client_type:1,
          cst_sup_typ:2
        }
      }
    },
    computed:mapGetters([
      'chosenCompany'
    ]),
    mounted() {
      this.getList()

      this.updateTemp.company_id = this.chosenCompany.company_id;
      this.updateTemp.client_type = 1

    },
    methods: {
      showEdit(item){
        this.updateTemp.sup_company_id = item.row.sup_company_id
        this.updateTemp.index = item.$index
        supInfoView(this.updateTemp)
          .then(res => {
            if(res.is_tax){
              res.is_tax = '是'
            }else{
              res.is_tax = '否'
            }
            this.updateTemp = res;
            this.updateTemp.index = item.$index
            this.isShowEdit = true
          })
          .catch(err => {
            this.$message.error('查询该供应商信息失败!');
            console.log(err);
          })
      },
      updateSupply(){
        supInfoUpdate(this.updateTemp)
          .then(res => {
            this.list[this.updateTemp.index].sup_company_name = res.sup_company_name;
            this.list[this.updateTemp.index].quality_level = res.quality_level
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.isShowEdit = false
          })
          .catch(err => {
            this.$message.error('修改失败!');
            console.log(err);
          })
      },
      handleCreate(){
        this.isShowCreate = true
      },
      createSupply(){

      },
      getList() {
        this.listLoading = true
        this.listQuery.company_id = this.chosenCompany.company_id
        cstOrSupList(this.listQuery).then(res => {
          const items = res.cst_info
          this.list = items
          this.total_count = res.total_count
          this.total_page = res.total_page
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.curr_page = 1
        this.getList()
      },
      async querySearchAsync(queryString, cb) {
        let restaurants = [];
        this.searchReqData.cst_sup_name = queryString
        this.searchReqData.company_id = this.chosenCompany.company_id
        await cstSupSearch(this.searchReqData)
          .then(res => {
            restaurants = res.cst_sup
          })
          .catch(err => {
            this.$message.error('查询失败!');
            console.log(err);
          })
        let results = queryString ? restaurants : restaurants.filter(this.createFilter(queryString));
        // 调用 callback 返回建议列表的数据
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000 * Math.random());
        //cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.cst_company_name.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.createTemp.companyName = item.cst_company_name;
      },
      handleSizeChange(val) {
        this.listQuery.page_size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.curr_page = val
        this.getList()
      },
      delRow(id){
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delData.cst_sup_id = [id]
          this.delData.company_id = this.chosenCompany.company_id
          cstSupDelete(this.delData)
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.listQuery.curr_page = 1
              this.getList()
            })
            .catch(err => {
              this.$message.error('删除失败!');
              console.log(err);
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style lang="scss">
  .my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .highlighted .addr {
    color: #ddd;
  }
  }
  }
</style>
